
import BaseView from "./baseView.js";

export default class denglu extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/zhuce.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    //渲染框架结构
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header class="header">
            <div>
                <a href="./index-pc-shouye.html"><img src="./img/logo_s.png" alt="猫眼电影"></a>
            </div>
        </header>
        <!-- 内容 -->
        <article class="article">
            <form action="">
                <div class="cellphone">
                    <label for="">手机号</label>
                    <input type="text" placeholder="请输入11位手机号码" maxlength="11"><span>注册成功后，全美团通用</span>
                    <span>请输入您的手机号码</span>
                </div>
                <div class="message">
                    <label for="duanxin"><div>免费获取短信动态码</div><input id="duanxin" type="checkbox"><span>验证码以下发到您的手机，请查收！<i class="m1">后可再次发送</i></span</label>
                </div>
                <div class="dynamic">
                    <label for="">短信动态码</label>
                    <input type="text">
                    <span>请输入短信动态码</span>
                </div>
                <div class="dynamic">
                    <label for="">用户名</label>
                    <input type="text" id="userName">
                    <span>请输入用户名</span>
                </div>
                <div class="cipher">
                    <label for="">创建密码</label>
                    <input type="password">
                    <span>请输入密码，建议加入字符、数字、字母组合！</span>
                    <p class="layout">
                        <span>弱</span><span>中</span><span>强</span>
                    </p>
                </div>
                <div class="ciphertwo">
                    <label for="">确认密码</label>
                    <input type="password" id="userPassword">
                    <span>请在次输入密码，建议加入字符、数字、字母组合！</span>
                </div>
                <div class="consent">
                    <a href="javascript:;" id="btn">同意以下协议并注册</a>
                </div>
                <a href=""><label for="protocol">《美团网用户协议》</label></a>
                <input type="checkbox" id="protocol" class="protocol">
                <div class="protocoltwo">
                    <h1>美团网用户协议</h1>
                    <p>欢迎您注册美团账号并使用美团的服务！</p>
                    <p>本《美团用户服务协议》（以下简称“本服务协议”）是您与美团之间就注册美团用户账号及使用美团的各项服务等相关事宜所订立的协议。为使用美团的服务，您应当仔细阅读并遵守本服务协议下的全部内容，特别是涉及免除或者责任限制的条款，该类条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本服务协议所有条款，否则您将不能注册美团账号或使用美团的服务，如您不同意本服务条款的任意内容，请勿注册或使用美团的服务，并应立即停止注册程序。如您对本服务协议的内容（特别是涉及免除或者责任限制的条款）有任何疑义，可随时按照本服务协议中列明的联系方式与我们联系，我们将根据您的要求为您进一步解释和说明相关内容。如您勾选“我同意《美团用户服务协议》”并通过注册程序或其他任何方式使用或接受美团的任何服务，即视为您已阅读并同意本服务协议，自愿接受本服务协议的所有内容的约束。请您在决定注册或使用服务前再次确认您已知悉并完全理解本服务协议的所有内容。</p>
                </div>
            </form>
        </article>
        <!-- 底部 -->
        <footer>
            <p>©2021 美团网团购 meituan.com 京ICP证070791号 京公网安备11010502025545号</p>
        </footer>  
        <script src="./lib/jquery.min.js"></script>
        <script src="./lib/director.min.js"></script>
        <script type="module" src="./routes/manyanRoutes.js"></script>   
        `)
    }
    handle() {
        $("#btn").on("click", function () {
            $.ajax({
                type: "post",
                url:"/api/reg",
                data:{
                    userName:$("#userName").val(),
                    userPassword:$("#userPassword").val()
                },
                dataType: "json",
                success(data){
                    if(data.code===0){
                        alert(data.msg);
                        window.location.hash =  '#/logins'
                    }else{
                        alert(data.msg);
                    }
                   
                }
            })
        })


    }
}